---
title: Front Matter CMS & Astro
description: Ajouter du contenu à votre projet Astro en utilisant Front Matter CMS
sidebar:
  label: Front Matter CMS
type: cms
logo: frontmatter-cms
i18nReady: true
---
import { FileTree } from '@astrojs/starlight/components';

[Front Matter CMS](https://frontmatter.codes/) apporte le CMS à votre éditeur, il fonctionne dans Visual Studio Code, GitPod, et bien d'autres.

## Intégration avec Astro

Dans cette section, nous allons voir comment ajouter Front Matter CMS à votre projet Astro.

### Prérequis 

- Visual Studio Code
- Utilisez le [modèle Astro Blog](https://github.com/withastro/astro/tree/main/examples/blog) pour fournir la configuration de base et un exemple de contenu pour commencer avec Front Matter CMS.

### Installer l'extension Front Matter CMS

Vous pouvez obtenir l'extension sur le [Marketplace de Visual Studio Code - Front Matter](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter) ou en cliquant sur le lien suivant : [ouvrir l'extension Front Matter CMS dans VS Code](vscode:extension/eliostruyf.vscode-front-matter)

### Initialisation du projet

Une fois que Front Matter CMS est installé, vous obtiendrez une nouvelle icône dans la barre d'activité. Elle ouvrira le panneau **Front Matter CMS** dans la barre latérale principale lorsque vous cliquerez dessus. Suivez les étapes suivantes pour initialiser votre projet :

- Cliquez sur le bouton **Initialiser le projet** (__Initialize project__) dans le panneau Front Matter
- L'écran de bienvenue s'ouvre et vous pouvez commencer à initialiser le projet.
- Cliquez sur la première étape pour **Initialiser le projet**.
- Comme Astro est l'un des frameworks pris en charge, vous pouvez le sélectionner dans la liste.
- Enregistrez vos dossiers de contenu, dans ce cas, le dossier `src/content/blog`.

  :::note
  L'enregistrement des dossiers est nécessaire pour permettre à Front Matter CMS de savoir où il peut trouver et créer votre contenu. Vous pouvez avoir plusieurs types de dossiers tels que pages, blog, docs, et bien d'autres.
  :::

- Il vous sera demandé de saisir le nom du dossier. Par défaut, il prend le nom du dossier.

  :::note
  Le nom est utilisé lors du processus de création d'un nouveau contenu. Par exemple, le fait d'avoir plusieurs enregistrements de dossiers vous permet de choisir le type de contenu que vous souhaitez créer.
  :::

- Cliquez sur **Afficher le tableau de bord** pour ouvrir le tableau de bord du contenu.

  :::tip
  Une fois que Front Matter CMS est initialisé, vous pouvez ouvrir le tableau de bord comme suit :

  - Utilisation de la combinaison clavier : <kbd>alt</kbd> + <kbd>d</kbd> (Windows & Linux) ou <kbd>options</kbd> + <kbd>d</kbd> (macOS)
  - Ouvrez la palette de commandes et recherchez `Front Matter : Ouvrir le tableau de bord` (__`Front Matter: Open dashboard`__)
  - Cliquez sur l'icône **Front Matter** dans la barre de titre du tableau de bord ou sur les fichiers.
  :::

### Configuration du projet

Une fois le projet initialisé, vous obtiendrez un fichier de configuration `frontmatter.json` et un dossier `.frontmatter` à la racine de votre projet.

<FileTree title="Structure du projet">
- .frontmatter/
  - database/
    - mediaDb.json
- src/
- astro.config.mjs
- **frontmatter.json**
- package.json
</FileTree>

#### Configuration du type de contenu

Les types de contenu sont la façon dont Front Matter CMS gère votre contenu. Chaque type de contenu contient un ensemble de champs, qui peuvent être définis pour chaque type de contenu que vous souhaitez utiliser pour votre site web.

Les champs correspondent au Front Matter du contenu de votre page.

Vous pouvez configurer les types de contenu dans le fichier `frontmatter.json`. 

- Ouvrez le fichier `frontmatter.json`.
- Remplacez le tableau `frontMatter.taxonomy.contentTypes` par la configuration suivante des types de contenu :

```json title="frontmatter.json"
"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fields": [
      {
        "title": "Titre",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Date de publication",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Image d'apercu",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]
```

:::note
Cette configuration garantit que le type de contenu Front Matter correspond au schéma de la collection de contenu du modèle de blog Astro.
:::

:::tip
Vous trouverez plus d'informations sur les types de contenu et les champs pris en charge dans la section des documents sur la [création de contenu](https://frontmatter.codes/docs/content-creation) de Front Matter CMS.
:::

### Prévisualiser vos articles dans l'éditeur

Dans le panneau **Front Matter CMS**, cliquez sur le bouton **Démarrer le serveur**. Cette action démarre le serveur de développement local Astro. Une fois lancé, vous pouvez ouvrir le tableau de bord du contenu, sélectionner un des articles et cliquer sur le bouton **Ouvrir l'aperçu** pour ouvrir l'article dans l'éditeur.

### Créer de nouveaux articles

Ouvrez le **tableau de bord de Front Matter CMS** ; vous pouvez le faire comme suit : 

- Ouvrez le tableau de bord du contenu de Front Matter CMS
- Cliquez sur le bouton **Créer un contenu**.
- Front Matter vous demandera le titre de l'article. Remplissez-le et appuyez sur Entrée
- Votre nouvel article sera créé et ouvert dans l'éditeur. Vous pouvez commencer à rédiger votre article.

### Utilisation de Markdoc avec Front Matter CMS

Pour utiliser Markdoc avec Front Matter CMS, vous devez le configurer dans le paramètre `frontMatter.content.supportedFileTypes`. Ce paramètre permet au CMS de savoir quels types de fichiers il peut faire progresser.

Vous pouvez configurer ce paramètre comme suit :

```json title="frontmatter.json"
"frontMatter.content.supportedFileTypes": [ "md", "markdown", "mdx", "mdoc" ]
```

Pour permettre à votre contenu d'être créé en tant que Markdoc, spécifiez la propriété `fileType` sur le type de contenu.

```json title="frontmatter.json" ins={7}
"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fileType": "mdoc",
    "fields": [
      {
        "title": "Titre",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Date de Publication",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Image d'apercu",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]
```

## Ressources officielles

- [Front Matter CMS](https://frontmatter.codes/) (Anglais)
- [Front Matter CMS - Documentation](https://frontmatter.codes/docs/) (Anglais)
- [Démarrer avec Astro et Front Matter CMS](https://youtu.be/xb6pZiier_E) (Anglais)
